<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/element.css">
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="js/element.js"></script>
</head>
<body>
<div id="box">
    <div><h1>我收藏的文章</h1></div>
    <!--    查询-->
    <div style="margin-top: 20px;margin-left: 72px">
        <span>按标题名字查找</span>
        <el-input v-model="input01" placeholder="请输入文章标题" style="width: 200px;margin-left: 20px"></el-input>
        <el-button type="primary" style="margin-left: 20px" @click="query">查询</el-button>
    </div>
    <!--    卡片-->
    <div style="margin-top: 20px;margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
                <a href="article_detail.html" style="color: rgb(64, 158, 255);text-decoration: none" class="java">如何做一名合格的java工程师？</a><br>
                <div style="margin-top: 10px"><b>作者：</b><i>小灰</i><br></div>
                <div style="margin-top: 10px"><b>时间：</b><i>2025-1-1 09:52:12</i><br></div>
                <div style="margin-top: 10px"><b>内容：</b><i>做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,</i><br>
                </div>
            </el-card>
        </el-col>
    </div>
    <div style="margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
            </el-card>
        </el-col>
    </div>
    <div style="margin-top: 20px;margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
                <a href="article_detail.html" style="color: rgb(64, 158, 255);text-decoration: none" class="java">如何做一名合格的java工程师？</a><br>
                <div style="margin-top: 10px"><b>作者：</b><i>小灰</i><br></div>
                <div style="margin-top: 10px"><b>时间：</b><i>2025-1-1 09:52:12</i><br></div>
                <div style="margin-top: 10px"><b>内容：</b><i>做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,</i><br>
                </div>
            </el-card>
        </el-col>
    </div>
    <div style="margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
            </el-card>
        </el-col>
    </div>
    <div style="margin-top: 20px;margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
                <a href="article_detail.html" style="color: rgb(64, 158, 255);text-decoration: none" class="java">如何做一名合格的java工程师？</a><br>
                <div style="margin-top: 10px"><b>作者：</b><i>小灰</i><br></div>
                <div style="margin-top: 10px"><b>时间：</b><i>2025-1-1 09:52:12</i><br></div>
                <div style="margin-top: 10px"><b>内容：</b><i>做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,做一名Java工程师需要付出非常大的努力,</i><br>
                </div>
            </el-card>
        </el-col>


    </div>
    <div style="margin-left: 72px">
        <el-col :span="24">
            <el-card shadow="always">
            </el-card>
        </el-col>
    </div>
    <!--    分页-->
    <!-- 移除 el-col，直接使用 div 包裹分页组件 -->
    <div style="margin-top: 20px; text-align: center">
        <el-pagination
                background
                layout="prev, pager, next"
                :total="100"
                style="display: inline-block;margin-top: 66px"> <!-- 关键：设置为行内块级元素 -->
        </el-pagination>
    </div>
</div>


<script>
    new Vue({
        el: '#box',
        data() {
            return {
                input01: "",
            }
        },
        methods: {
            query() {
                location.reload();
            }
        }
    })
</script>
<script>
    $(function () {
        $(".java").mouseover(function () {
            $(this).css("color", "red")
        })
        $(".java").mouseout(function () {
            $(this).css("color", "rgb(64, 158, 255)")
        })

    })
</script>
</body>
</html>